<template>
	<view class="love">
		<u-search @search="search" @custom="search" v-model="value"></u-search>
		<swiper indicator-dots :circular="true" interval="3000" :autoplay="true">
			<swiper-item v-for="item in lun" :key="item.id" >
				<image :src="'http://124.93.196.45:10001'+item.imgUrl" style="width: 100%; height: 100%;"></image>
			</swiper-item>
		</swiper>
		<u-grid col="4" :border="true">
			<u-grid-item v-for="item in type" style="margin-top: 20px;" @click="tonext(item.id)">
				<image :src="'http://124.93.196.45:10001'+item.imgUrl" style="width: 60px; height: 60px;"></image>
				<text>{{item.name}}</text>
			</u-grid-item>
		</u-grid>
		<text style="font-size: 28px;">推荐公益</text>
		<view class="l1" v-for="item in tuijian">
			<image :src="'http://124.93.196.45:10001'+item.imgUrl"></image>
			<text>{{item.name}}</text>
			<text>发布组织：{{item.author}}</text>
			<view class="l2">
				<text>捐赠次数：{{item.donateCount}}次</text>
				<text>已筹善款：{{item.moneyNow}}元</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lun:[],
				type:[],
				tuijian:[],
				value:''
			}
		},
		onLoad() {
			this.getlun()
			this.gettype()
			this.gettuijian()
		},
		methods: {
			getlun(){
				this.api.get('/prod-api/api/public-welfare/ad-banner/list').then(res=>{
					this.lun=res.data.data
				})
			},
			gettype(){
				this.api.get('/prod-api/api/public-welfare/public-welfare-type/list').then(res=>{
					this.type=res.data.data
				})
			},
			gettuijian(){
				this.api.get('/prod-api/api/public-welfare/public-welfare-activity/recommend-list').then(res=>{
					this.tuijian=res.data.rows
				})
			},
			search(){
				uni.navigateTo({
					url:'/pages/other/aixin/searchdetail/searchdetail?name='+this.value
				})
				this.value=''
			},
			tonext(e){
				uni.navigateTo({
					url:'/pages/other/aixin/gongyilist/gongyilist?id='+e
				})
			}
		}
	}
</script>

<style lang="scss">
.l1{
	line-height: 30px;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	image{
		width: 100%;
		height: 175px;
	}
	.l2{
		display: flex;
		justify-content: space-between;
	}
}
</style>
